<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Rate 评分</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-space direction="vertical">
		<a-rate v-model:value="value1_1"></a-rate>
		<a-rate v-model:value="value1_2" :count="10"></a-rate>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">文案展现</a-divider><!-- =============================================================== -->
	<p class="desc">给评分组件加上文案展示。</p>
	<a-space direction="vertical">
		<div>
			<a-rate v-model:value="value2_1" :tooltips="desc2_1" @change="change2_1" @hover-change="hoverChange2"></a-rate> &nbsp; <span v-text="get_tips2_1"></span>
		</div>
		<div>
			<a-rate v-model:value="value2_2" :tooltips="desc2_2" :count="count2"></a-rate> &nbsp; <span v-text="get_tips2_2"></span>
		</div>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">清除</a-divider><!-- =============================================================== -->
	<p class="desc">支持允许或者禁用清除。评分后，再点一下，就取消了评分。</p>
	<a-space direction="vertical">
		<div>
			<a-rate v-model:value="value3_1"></a-rate>
			<span class="ant-rate-text">allowClear: true</span>
		</div>
		<div>
			<a-rate v-model:value="value3_2" :allow-clear="false"></a-rate>
			<span class="ant-rate-text">allowClear: false</span>
		</div>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">半星</a-divider><!-- =============================================================== -->
	<p class="desc">支持选中半星。</p>
	<a-space>
		<a-rate v-model:value="value4_1" allow-half></a-rate>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">只读</a-divider><!-- =============================================================== -->
	<p class="desc">只读，无法进行鼠标交互。</p>
	<a-space>
		<a-rate v-model:value="value5_1" disabled></a-rate>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">其他字符</a-divider><!-- =============================================================== -->
	<p class="desc">可以将星星替换为其他字符，比如字母，数字，字体图标甚至中文。</p>
	<a-space direction="vertical">
		<a-rate v-model:value="value6_1" allow-half>
			<template #character>
				<heart-outlined class="ant-icon"></heart-outlined>
			</template>
		</a-rate>
		<a-rate v-model:value="value6_2" character="A" allow-half style="font-size: 36px"></a-rate>
		<a-rate v-model:value="value6_3" character="好" allow-half style="font-size: 36px"></a-rate>
	</a-space>
	
	
</div>
<div class="h100"></div>

</body>
<script>


let thisValue = "分";
let arr2 = Array.from({length: 3}, function(v, k){
	return k + "=>" + v + "---" + this;
}, thisValue);
// console.log(arr2);		//['0=>undefined---分', '1=>undefined---分', '2=>undefined---分']

let arr3 = Array.from({length: 6}, (v, k)=>k + '分');
// console.log(arr3);		//['0分', '1分', '2分', '3分', '4分', '5分']


const Main = {
data() {
	return {
		value1_1: 2,
		value1_2: 2,
		
		value2_1: 3,
		value2_2: 3,
		count2: 10,
		desc2_1: ['最差', '比较差', '一般般', '好评', '完美'],
		desc2_2: [],
		
		value3_1: 3,
		value3_2: 3,
		
		value4_1: 3.5,
		
		value5_1: 2,
		
		value6_1: 2,
		value6_2: 2.5,
		value6_3: 3,
		
		
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		this.desc2_2 = Array.from({length: this.count2}, (v, k) => k + 1 + '分');
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed: {
	get_tips2_1(){
		if(this.value2_1){
			return this.desc2_1[this.value2_1 - 1];
		}
		return '取消了评分';
	},
	get_tips2_2(){
		if(this.value2_2){
			return this.desc2_2[this.value2_2 - 1];
		}
		return '取消了评分！';
	},
},
methods:{
	change2_1(val){
		console.log('change2_1', val);
	},
	hoverChange2(val){
		console.log('hoverChange2', val);
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
